<!DOCTYPE html>
<html>

	<head>
		<title>网易图片动画</title>
		<style>
			div.img {
				width: 220px;
				height: 170px;
				margin: 200px auto;
				overflow: hidden;
			}
			
			img.bigger {
				width: 100%;
				height: 100%;
			}
			
			@keyframes bigger {
				from {
					width: 100%;
					height: 100%;
				}
				to {
					width: 110%;
					height: 110%;
				}
			}
			
			@keyframes smaller {
				from {
					width: 110%;
					height: 110%;
				}
				to {
					width: 100%;
					height: 100%;
				}
			}
		</style>
	</head>

	<body>
		<div class="img">
			<img class="bigger" src="http://cms-bucket.nosdn.127.net/d9b6afa0bad743f88c1780c3a064202c20170218074455.jpeg?imageView&thumbnail=185y116&quality=85" alt="">
		</div>
		<script>
			var img = document.querySelector("img");

			img.onmouseover = function() {
				img.style.cssText = "animation: bigger 2s;width:110%; height:110%;";
			}
			img.onmouseout = function() {
				img.style.cssText = "animation: smaller 2s";
			}
		</script>
	</body>

</html>